<template>
  <div
    class="flex flex-col items-center w-10/12 h-32 my-4 overflow-hidden rounded bg-white-opacity "
  >
    <!-- title -->
    <div class="flex items-center w-full h-6 pl-4 text-white bg-black-opacity">
      Welcome 欢迎~
    </div>
    <!-- content -->
    <div class="flex items-center justify-around w-3/4 h-full">
      <a-avatar
        class="w-14 h-14 mr-2"
        src="https://tse1-mm.cn.bing.net/th/id/OIP.b4_FzNs6Hdf4EjpKknu7HAAAAA?w=201&h=201&c=7&o=5&pid=1.7"
        alt="avatar"
      ></a-avatar>
      <span class="text-sm">{{name}}</span>
      <button
        class="w-20 h-8 text-xs tracking-wider text-white transition-transform duration-200 ease-out transform rounded hover:scale-110 bg-black-opacity-btn hover:ring hover:ring-yellow-50"
        @click="logout($router)" 
      >
        logout
      </button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue"
import { logout } from "@/api/user"
import { userUserStore } from '@/store/modules/user'
const userStore = userUserStore()
const name = userStore.role
</script>
<style scoped></style>
